<template>
	<view class="container">
		<view class="touzhi">
			<view class="touzhi1">
				<text>{{$t('kuan.zhiyajiner')}}</text>
			</view>
			<view class="touzhiinput">
				<input style="width: 80%;" v-model="money" type="number" maxlength="-1" :placeholder="this.$t('kuan.qingshuru')+'5<xxx<10000'" />
				<text>USDT</text>
			</view>
			<view class="xuanzhitianshu">
				<view class="tianshu">
					<text>{{$t('kuan.xuanzetianshu')}}</text>
				</view>
				<view class="xialatian">
					<uni-data-select v-model="value" :clear="false" :localdata="range" @change="change"></uni-data-select>
				</view>
			</view>
			<view class="dizhi">
				<text>{{$t('kuan.dizhi')}}:{{formatNumber(walletAddress)}}</text>
			</view>
			<view class="rishouyi">
				<text>{{$t('kuan.rishouyi')}}:</text>
				<view class="wenhao" @click="open">
					<image class="wenhaoimg" src="/static/icon/wenhao.png" mode=""></image>
					<text>{{ acceleration }}%</text>
				</view>
			</view>
			<view class="touzhianniu" @click="touzhi">
				<text>{{$t('kuan.touzhi')}}</text>
			</view>
		</view>
		<!-- 弹框说明 -->
		<uni-popup ref="popup" type="center">
			<view class="shuomingwenan">
				<view class="guanbi">
					<image class="guanbi1" @click="close" src="/static/icon/guanbi.png" mode=""></image>
				</view>
				<view class="wenzhang">
					<text>7{{$t('kuan.day')}}1%({{$t('kuan.tiyan')}}）</text>
					<text>15{{$t('kuan.day')}}1.1%({{$t('kuan.tiyan')}}</text>
					<text>30{{$t('kuan.day')}}1.3%</text>
					<text>90{{$t('kuan.day')}}1.5%</text>
					<text>180{{$t('kuan.day')}}1.8%</text>
					<text>360{{$t('kuan.day')}}2%</text>
				</view>

			</view>
		</uni-popup>
		<!-- 质押订单 -->
		<view class="touzhi">
			<view class="touzhidingdan" @click="gozhiyejilu">
				<text class="touzhidingdan1">{{$t('kuan.zhiyadingdan')}}</text>
				<text>{{$t('kuan.touzhijilu')}}></text>
			</view>
			<view class="touzhidingdan2">
				<view class="touzhizonger">
					<text class="touzhizonger1">{{touzi}} USDT</text>
					<!-- <text>{{$t('kuan.touzhizoner')}}</text> -->
				</view>
				<view class="touzhiimg">
					<image src="/static/icon/usdt.jpg" mode=""></image>
				</view>
			</view>
			<view class="leiji">
				<text>{{$t('kuan.leijishouyi')}}</text>
				<text>{{fenyong}} XGT</text>
			</view>

		</view>

 <!-- 以下是该组件使用的全部属性 -->
		    <sanshui-payment-password  v-model="showModal":mode="1" :digits="6" @submit="submitHandle" />
	</view>
</template>

<script>
	//引入组件文件
	import SanshuiPaymentPassword from '../../components/sanshui-payment-password/sanshui-payment-password.vue'
	import {
		Debounce
	} from "@/api/debounce.js"; //防抖
	import walletMixin from "@/mixins/walletMixin.js"; // 钱包混入
	export default {
		mixins: [walletMixin],
		components:{
		            SanshuiPaymentPassword
		        },
		data() {
			return {
				money: '',
				value:0,
				day:"1",
				address: '',
				touzi:'0',
				fenyong:'0',
				userinfo: {},
				showModal: false,
				zjc:"false",
				zfpass:"false",
				range: [{
						value: 0,
						text: '7'+this.$t('kuan.day')+'('+this.$t('kuan.tiyan')+')'
					},{
						value: 1,
						text: '15'+this.$t('kuan.day')+'('+this.$t('kuan.tiyan')+')'
					},
					{
						value: 2,
						text: '30'+this.$t('kuan.day')+''
					},
					{
						value: 3,
						text: '90'+this.$t('kuan.day')+''
					},
					{
						value: 4,
						text: '180'+this.$t('kuan.day')+''
					},
					{
						value: 5,
						text: '360'+this.$t('kuan.day')+''
					},
				],

			}
		},
		computed: {
			acceleration() {
				let acc = 0;
				if (this.value==0) {
					acc = 1;
					this.day="7"
				} else if (this.value==1) {
					acc = 1.1;
					this.day="15"
				} else if (this.value==2) {
					acc = 1.3;
					this.day="30"
				} else if (this.value==3) {
					acc = 1.5;
					this.day="90"
				} else if (this.value==4) {
					acc = 1.8;
					this.day="180"
				} else if (this.value==5) {
					acc = 2; // 超过范围的设置为0（或者可以显示其他提示）
					this.day="360"
				}
				return acc;
			}
		},
		onLoad() {
		uni.setNavigationBarTitle({
		  title:  this.$t('zhiyawakuan'), // 必填，页面标题）
		 })		
		 this.getuserinfo()
		 this.getlicailist()
		},
		onShow() {
			 this.getuserinfo()
		},
		methods: {
			// 获取个人资料
			getuserinfo() {
				let data = {}
				let opts = {
					url: '/user/GetUserInfo',
					method: 'GET'
				};
				this.api.httpTokenRequest(opts, data).then(res => {
					// console.log('个人资料', res);
					if (res[1].data.state == 'success') {
						this.userinfo = res[1].data.list[0]
						this.zfpass=this.userinfo.zfpass
						this.zjc=this.userinfo.zjc
			
					}
			
				})
			},
			// 质押列表
			getlicailist() {
				let data = {
					yema:1,
					yezhi:10
				}
				let opts = {
					url: '/order/Getzhiyalist',
					method: 'GET'
				};
				this.api.httpTokenRequest(opts, data).then(res => {
					// console.log('个人资料', res);
					if (res[1].data.state == 'success') {
						this.touzi = res[1].data.touzi
						this.fenyong = res[1].data.fenyong
			
					}
			
				})
			},
			// 输入支付密码
			payment(){
				if(this.zjc==="false"&&this.zfpass==="false"){
					this.$tab.redirectTo('/pages/my/zhujici')
				}else if(this.zjc==="true"&&this.zfpass==="false"){
					this.$tab.redirectTo('/pages/my/yanzengzhuci?type=1')
				}else if(this.zjc==="true"&&this.zfpass==="true"){
					this.showModal = true
				}
				
			},
			// 支付密码验证
			submitHandle(e) {
			  if(e.type=="true"){
				  this.touzhi()
			  }
			},
			// 投资金额
			touzhi:Debounce(function(){
				var userusdt=uni.getStorageSync('userinfo')
				if (this.money < 5) {
				 this.$modal.msg(this.$t('msg.error3'))
				  return false
				}
				if (this.money > 10000) {
				 this.$modal.msg(this.$t('msg.error4'))
				  return false
				}
				if (this.money>userusdt.usdt) {
				 this.$modal.msg(this.$t('msg.error5'))
				  return false
				}
				let data = {
					money:this.money,
					day:this.day
				}
				let opts = {
					url: '/order/Addzhiya',
					method: 'POST'
				};
				// console.log('打印入参',data);
				this.api.httpTokenRequest(opts, data).then(res => {
					// console.log('订单创建成功', res);
					if(res[1].data.state=="success"){
						this.$modal.msg(res[1].data.msg)
					}else{
						this.$modal.msg(res[1].data.msg)
					}
							
				})
			},1000),
			gozhiyejilu:Debounce(function(){
				this.$tab.navigateTo('/pages/kuan/zhiyajilu')
			},1000),
			// 格式数字
			formatNumber(number) {
				// 处理 undefined 或 null 的情况
				if (!number) return '';
				// 将数字转化为字符串
				const str = number.toString();
				// 提取前四位和后四位，中间用省略号代替
				const start = str.slice(0, 5);
				// 提取前四位和后四位，中间用省略号代替
				const end = str.slice(-5);
				return `${start}......${end}`;
			},
			checkMinimum() {
			      if (this.money < 5) {
					  this.$modal.msg(this.$t('msg.error3'))
			      }
			    },
			// 选中天数
			change(e) {
				this.value=e
			  // console.log("e:", e);
			},
			// 打开弹框
			open() {
				this.$refs.popup.open('center')
			},
			// 关闭弹框
			close() {
				this.$refs.popup.close()
			}


		},
	}
</script>

<style>
	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.touzhi {
		width: 86%;
		padding: 25rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		border: 1rpx solid #aef0f5;
		margin-top: 20rpx;
	}

	.touzhi1 {
		width: 100%;
		margin-top: 10rpx;
		font-size: 36rpx;
		font-weight: 700;
	}

	.touzhiinput {
		width: 92%;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-top: 30rpx;
		border: 1rpx solid #aef0f5;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.xuanzhitianshu{
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 25rpx;
	}
	.xialatian{
		width: 98%;
		border-radius: 20rpx;
		margin-top: 20rpx;
		color: #fff;
		border: 1rpx solid #aef0f5;
	}
	.tianshu{
		width: 100%;
		font-size: 30rpx;
		font-weight: 700;
	}

	.dizhi {
		width: 100%;
		font-size: 28rpx;
		margin-top: 30rpx;
		font-weight: 500;
	}

	.rishouyi {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.wenhao {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.wenhaoimg {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.touzhianniu {
		width: 90%;
		height: 80rpx;
		border: 1rpx solid #aef0f5;
		border-radius: 10rpx;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.touzhidingdan {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 15rpx;

	}

	.touzhidingdan1 {
		font-size: 36rpx;
		font-weight: 700;
	}

	.touzhidingdan2 {
		width: 94%;
		padding: 20rpx;
		height: 140rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #000;
		background-image: linear-gradient(to right, #101010 10%, #15217b 90%);
		border-radius: 20rpx;
		margin-top: 30rpx;
	}

	.touzhizonger {
		display: flex;
		flex-direction: column;
		margin-left: 15rpx;
		font-size: 28rpx;
		font-weight: 500;
	}

	.touzhizonger1 {
		font-size: 42rpx;
		font-weight: 700;
		margin-bottom: 15rpx;
	}

	.touzhiimg {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 30rpx;
	}

	.leiji {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	/* 弹框说明 */
	.shuomingwenan {
		width: 460rpx;
		background-color: #333333;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		padding: 25rpx;
	}

	.guanbi {
		width: 100%;
		display: flex;
		justify-content: end;
	}

	.guanbi1 {
		width: 50rpx;
		height: 50rpx;
	}

	.wenzhang {
		display: flex;
		flex-direction: column;
		margin-left: 50rpx;
		margin-top: 25rpx;
		margin-bottom: 25rpx;
		line-height: 36rpx;
		font-size: 28rpx;
		font-weight: 500;
	}
</style>